import { MoreOutlined } from "@ant-design/icons";
import type { RedisClient } from "@linksaas-minapp/redis-proxy-api"
import { Button, Card, Form, Input, InputNumber, List, Modal, Popover, Select, Space, message } from "antd"
import { useState, useEffect } from "react"

export interface ListValueProps {
    client: RedisClient;
    curKey: string;
}

function ListValue(props: ListValueProps) {
    const [valueList, setValueList] = useState<string[]>([]);
    const [newValue, setNewValue] = useState("");
    const [newValueMode, setNewValueMode] = useState<"L" | "R">("R");
    const [showAddModal, setShowAddModal] = useState(false);
    const [removeValue, setRemoveValue] = useState("");
    const [removeCount, setRemoveCount] = useState(0);
    const [showRemoveModal, setShowRemoveModal] = useState(false);

    const loadData = async () => {
        const res = await props.client.listCommand().lrange(props.curKey, 0, -1);
        setValueList(res);
    };

    const addData = async () => {
        const tmpList = valueList.slice();
        if (newValueMode == "L") {
            await props.client.listCommand().lpushx(props.curKey, [newValue]);
            tmpList.unshift(newValue);
        } else if (newValueMode == "R") {
            await props.client.listCommand().rpushx(props.curKey, [newValue]);
            tmpList.push(newValue);
        }
        setValueList(tmpList);
        setShowAddModal(false);
    };

    const removeData = async () => {
        const removed = await props.client.listCommand().lrem(props.curKey, removeCount, removeValue);
        if (removed == 0) {
            message.warning("未找到匹配数据");
        } else {
            message.info(`删除${removed}个数据`);
            await loadData();
            setShowRemoveModal(false);
        }
    };

    useEffect(() => {
        loadData();
    }, []);

    return (
        <Card extra={
            <Space size="middle">
                <Button type="primary" onClick={e => {
                    e.stopPropagation();
                    e.preventDefault();
                    setNewValue("");
                    setNewValueMode("R");
                    setShowAddModal(true);
                }}>添加值</Button>
                <Popover trigger="click" placement="bottom" content={
                    <div>
                        <Button type="link" danger onClick={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            setRemoveValue("");
                            setRemoveCount(0);
                            setShowRemoveModal(true);
                        }}>删除值</Button>
                    </div>
                }>
                    <MoreOutlined />
                </Popover>
            </Space>
        }>
            <List dataSource={valueList}
                style={{ height: "calc(100vh - 280px)", overflowY: "auto" }}
                renderItem={(item, itemIndex) => (
                    <List.Item key={itemIndex}>{item}</List.Item>
                )} />
            {showAddModal == true && (
                <Modal open title="添加值" okText="添加" okButtonProps={{ disabled: newValue == "" }}
                    onCancel={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        setShowAddModal(false);
                    }}
                    onOk={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        addData();
                    }}>
                    <Form labelCol={{ span: 3 }}>
                        <Form.Item label="值">
                            <Input value={newValue} onChange={e => {
                                e.stopPropagation();
                                e.preventDefault();
                                setNewValue(e.target.value);
                            }} />
                        </Form.Item>
                        <Form.Item label="模式">
                            <Select value={newValueMode} onChange={value => setNewValueMode(value)}>
                                <Select.Option value="L">头部插入</Select.Option>
                                <Select.Option value="R">尾部插入</Select.Option>
                            </Select>
                        </Form.Item>
                    </Form>
                </Modal>
            )}
            {showRemoveModal == true && (
                <Modal open title="删除值" okText="删除" okButtonProps={{ danger: true, disabled: removeValue == "" }}
                    onCancel={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        setShowRemoveModal(false);
                    }}
                    onOk={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        removeData();
                    }}>
                    <Form labelCol={{ span: 4 }}>
                        <Form.Item label="值">
                            <Input value={removeValue} onChange={e => {
                                e.stopPropagation();
                                e.preventDefault();
                                setRemoveValue(e.target.value);
                            }} />
                        </Form.Item>
                        <Form.Item label="删除数量" help={
                            <>
                                {removeCount == 0 && "删除所有值匹配的数据"}
                                {removeCount > 0 && `从头到尾删除${removeCount}个匹配数据`}
                                {removeCount < 0 && `从尾到头删除${removeCount * -1}个匹配数据`}
                            </>
                        }>
                            <InputNumber controls={false} style={{ width: "100%" }} value={removeCount} precision={0} onChange={value => setRemoveCount((value as number) ?? 0)} />
                        </Form.Item>
                    </Form>
                </Modal>
            )}
        </Card>
    );
}

export default ListValue;